<!--
 * @Descripttion: 
 * @version: 1.0
 * @Author: 任静
 * @Date: 2020-11-12 20:39:08
 * @LastEditors: 任静
 * @LastEditTime: 2020-11-13 22:16:47
-->
<template>
  <div class="search">
    <van-nav-bar
      title="搜索"
      left-text="返回"
      left-arrow
      @click-left="toBack"
    />
    <div class="searchInp">
      <van-search
        v-model="searchValue"
        shape="round"
        placeholder="搜索你想知道的一切排名"
        @input="searchInp"
      />
      <span @click="searchEvent">搜索</span>
    </div>
    <!-- 搜索提示 -->
    <div class="searchTip">
      <van-list>
        <!-- <van-cell :title="5"   @click="searchTipEvent('item')"/> -->
        <van-cell
          v-for="item in searchTipList"
          :key="item"
          :title="item"
          @click="searchTipEvent(item)"
        />
      </van-list>
    </div>
    <div class="history">
      <div class="title">
        <h3>历史搜索</h3>
        <van-icon name="delete" @click="deleteHistory" />
      </div>
      <div class="list">
        <van-tag
          round
          type="primary"
          color="#F7F8FA"
          text-color="#333"
          v-for="item in searchHistory"
          :key="item"
          >{{ item }}</van-tag
        >
      </div>
    </div>
    <div class="hot">
      <h3>热门搜索</h3>

      <div class="hotlist">
        <span
          v-for="(item, index) in hotList"
          :key="index"
          @click="searchHot(item)"
        >
          {{ index + 1 }}、{{ item }}
        </span>
      </div>
    </div>
    <!-- {{searchList}} -->
  </div>
</template>
<script>
import { defineComponent, computed, ref, reactive } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { Dialog } from "vant";
export default defineComponent({
  setup(props, context) {
    //搜索输入的关键字
    let searchValue = ref();
    let router = useRouter();
    let store = useStore();
    function toBack() {
      router.go(-1);
    }
    store.dispatch("search/getHotList", { mid: 0 });
    //点击热门搜索
    function searchHot(item) {
      console.log(item);
      let searchkey = item;
      router.push({ path: "/searchcontent", query: { searchkey } });
      store.dispatch("search/getSearchHistory", { item });
    }
    //输入框输入，点击搜索按钮搜索
    function searchEvent() {
      let searchKey = searchValue.value;
      router.push({ path: "/searchcontent", query: { searchkey: searchKey } });
      store.dispatch("search/getSearchHistory", { item: searchKey });
    }
    //点击搜索提示列表
    function searchTipEvent(item) {
      router.push({ path: "/searchcontent", query: { searchkey: item } });
      store.dispatch("search/getSearchHistory", { item: item });
    }
    //删除历史记录
    function deleteHistory() {
      Dialog.confirm({
        title: "清空搜索记录",
        message: "",
      })
        .then(() => {
          store.dispatch("search/deleteSearchHistory");
        })
        .catch(() => {});
    }
    //输入提示
    function searchInp() {
      console.log(searchValue.value);
      store.dispatch("search/getSearchTipList", { keyword: searchValue.value });
    }
    return {
      searchValue,
      toBack,
      hotList: computed(() => store.state.search.hotList),
      searchHot,
      searchHistory: computed(() => store.state.search.searchHistory),
      deleteHistory,
      searchEvent,
      searchInp,
      searchTipList: computed(() => store.state.search.searchTipList),
      searchTipEvent,
    };
  },
});
</script>
<style lang="scss" scoped>
.search {
  width: 100%;
  height: 100%;
  font-size: 0.14rem;
  .searchInp {
    display: flex;
    align-items: center;
    width: 100%;
    .van-search {
      width: 80%;
    }
    span {
      background: #F7F8FA;
      border-radius: 10px;
      height: 24px;
      line-height: 24px;
    }
  }
  h2 {
    display: flex;
    height: 0.6rem;
    font-size: 0.16rem;
    justify-content: space-around;
    align-items: center;
    border-bottom: 1px solid #ccc;
  }
  .history {
    width: 100%;
    min-height: 1rem;
    box-sizing: border-box;
    padding: 0.1rem;
    .title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0.1rem 0.3rem;
    }
    .list {
      .van-tag {
        margin-left: 10px;
        padding: 1px 5px;
        line-height: 35px;
      }
    }
  }
  .hot {
    width: 100%;
    height: 1rem;
    box-sizing: border-box;
    padding: 0.2rem;
    .hotlist {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      span {
        width: 50%;
        line-height: 35px;
        text-align: left;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
}
</style>